<template>
<div id="favorite">
  <h1>在线工具备忘录</h1>
  <div class="note_book" id="output_wrapper_id">
    <p style="font-size: inherit; color: inherit; line-height: inherit; padding: 0px; margin: 1.5em 0px;">Window下推荐</p>
    <ul style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; padding-left: 32px; list-style-type: disc;">
      <li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-bottom: 0.5em;"><span style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;">Jetbrain全家桶 开发编辑器</span></li>
      <li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-bottom: 0.5em;"><span style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;">X-shell  远程ssh工具</span></li>
      <li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-bottom: 0.5em;"><span style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;">Postman 接口测试工具</span></li>
      <li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-bottom: 0.5em;"><span style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;">PowerDesigner 数据库设计工具 </span></li>
      <li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-bottom: 0.5em;"><span style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;">Navicat 数据库连接工具</span></li>
      <li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-bottom: 0.5em;"><span style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;">RedisDesktop Redis客户端 </span></li>
      <li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-bottom: 0.5em;"><span style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;">Typora+PicGo 来写markdown</span></li>
      <li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-bottom: 0.5em;"><span style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;">ProcessOn  流程图</span></li>
      <li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-bottom: 0.5em;"><span style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;">MindMaster  脑图 </span></li>
      <li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-bottom: 0.5em;"><span style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;">Snipaste  截图工具</span></li>
      <li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-bottom: 0.5em;"><span style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;">ScreenToGif Gif录制</span></li>
    </ul>
    <p style="font-size: inherit; color: inherit; line-height: inherit; padding: 0px; margin: 1.5em 0px;">Mac下推荐：</p>
    <ul style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; padding-left: 32px; list-style-type: disc;">
      <li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-bottom: 0.5em;"><span style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;">Jetbrain全家桶</span></li>
      <li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-bottom: 0.5em;"><span style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;">Typora+upic来写markdown</span></li>
      <li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-bottom: 0.5em;"><span style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;">iTrem终端</span></li>
      <li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-bottom: 0.5em;"><span style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;">Transmit Mac最强FTP工具</span></li>
      <li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-bottom: 0.5em;"><span style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;">JumpDesktop Mac最强远程桌面工具（连接Win）</span></li>
      <li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-bottom: 0.5em;"><span style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;">XMind 好用的脑图</span></li>
      <li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-bottom: 0.5em;"><span style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;">Medis Mac下好用好看的Redis可视化管理工具</span></li>
      <li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-bottom: 0.5em;"><span style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;">Dash Mac下超好用的离线文档</span></li>
      <li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-bottom: 0.5em;"><span style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;">Shimo Mac下好用的VPN客户端（稳定~）</span></li>
      <li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-bottom: 0.5em;"><span style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;">最重要的一个：OBS （开直播好方便 (*￣︶￣)）</span></li>
    </ul>
  </div>
</div>
</template>

<script>
  export default {
    name:"favorite",
    data(){
      return{
        size: 150,
        data1:[
          {
            author:"Convertio",
            description:"多文件格式转换",
            url:"https://convertio.co/zh/",
            action:"GO",
            imgUrl:require('../public/image/0001.png')
          },
          {
            author:"TinyPNG",
            description:"图片无损压缩",
            url:"https://tinypng.com/",
            action:"GO",
            imgUrl:require('../public/image/0002.png')
          },
          {
            author:"Typora",
            description:"Markdown 编辑器",
            url:"https://www.typora.io/",
            action:"GO",
            imgUrl:require('../public/image/0003.png')
          }
        ],
        data2:[
          {
            author:"Licecap",
            description:"屏幕录制工具",
            url:"https://licecap.en.softonic.com/",
            action:"GO",
            imgUrl:require('../public/image/0004.png')
          },
          {
            author:"Processon",
            description:"专业作图聚合工具",
            url:"https://www.processon.com/",
            action:"GO",
            imgUrl:require('../public/image/0005.png')
          },
          {
            author:"CCleaner",
            description:"轻量 PC 优化工具",
            url:"https://www.ccleaner.com/",
            action:"GO",
            imgUrl:require('../public/image/0006.png')
          }
        ],
        data3:[
          {
            author:"Xshell",
            description:"远程SSH工具",
            url:"http://www.netsarang.com/download/software.html",
            action:"GO",
            imgUrl:require('../public/image/0004.png')
          },
          {
            author:"ScreenToGif",
            description:"Gif图像屏幕录制",
            url:"https://www.screentogif.com",
            action:"GO",
            imgUrl:require('../public/image/0005.png')
          },
          {
            author:"Snipaste",
            description:"Windows截图工具",
            url:"https://www.snipaste.com",
            action:"GO",
            imgUrl:require('../public/image/0006.png')
          }
        ]
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .note_book{
    font-size: 16px; color: rgb(62, 62, 62);
    line-height: 1.6;
    word-spacing: 0px;
    letter-spacing: 0px;
    font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
    background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%);
    background-size: 20px 20px;
    background-position: center center;
  }
.el-card{
  text-align center
  .image{
    margin-top 15px
    width 75%
    height 75%
    border-radius 50%
  }
}
.action_btn{
  background-color #A0CFFF
  color #fff
  border-radius 40px
  display: flex;
  justify-content: center;
    a:hover
    {
      background-color lightseagreen
    }
}


  /*可任意修改样式，或恢复预设值，保存后生效
相对“默认样式”而作的修改会用  红色 标注*/

  .output_wrapper/*此属性为全局*/
  {
    font-size: 16px;
    color: #3e3e3e;
    line-height: 1.6;
    word-spacing:0px;
    letter-spacing:0px;
    font-family: "Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;

    /*增加背景网格*/
    background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg,rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%);
    background-size: 20px 20px;
    background-position: center center;
  }
  .output_wrapper *
  {
    font-size: inherit  ;
    color: inherit;
    line-height: inherit;
    margin:0px;
    padding:0px;
  }

  p {/*段落*/
    margin: 1.5em 0px;
  }
  h1,h2,h3,h4,h5,h6 {
    margin: 1.5em 0px;
    font-weight:bold;
  }
  h1 {
    font-size: 1.6em  ;

  }
  h2 {
    font-size: 1.4em;
  }
  h3 {
    font-size: 1.3em;
  }
  h4 {
    font-size: 1.2em;
  }
  h5 {
    font-size: 1em;
  }
  h6 {
    font-size: 1em;
  }

  ul, ol {
    padding-left: 32px;
  }
  ul{ /*无序列表*/
    list-style-type: disc;
  }
  ol { /*有序列表*/
    list-style-type: decimal;
  }
  li *
  {
    /* color: #3e3e3e;*/
  }

  li{  /*在公众号下，改变不了li符号的属性（如颜色），并会影响其子元素的属性;而在其它博客平台中，则能正常使用*/
    margin-bottom: 0.5em;
    /*  color:#159957; */
  }
  .code_size_default  /*代码块默认size*/
  {
    line-height: 18px;
    font-size: 14px;
    font-weight:normal;
    word-spacing:0px;
    letter-spacing:0px;
  }
  .code_size_tight /*代码块紧凑size*/
  {
    line-height: 15px;
    font-size: 11px;
    font-weight:normal;
    word-spacing:-3px;
    letter-spacing:0px;
  }
  pre code /*代码块*/
  {
    font-family: Consolas, Inconsolata, Courier, monospace;
    border-radius: 0px;
  }
  blockquote { /*引用块*/
    display: block;
    padding: 15px 1rem;
    font-size: 0.9em;
    padding-right: 15px;
    margin: 1em 0;
    color: #819198;
    border-left: 6px solid #dce6f0;
    background: #f2f7fb;
    overflow: auto;
    overflow-scrolling: touch;
    word-wrap: normal;
    word-break: normal;
  }
  blockquote p {
    margin: 0px;
  }

  a { /*超链接*/
    text-decoration: none;
    color: #1e6bb8;
    word-wrap:break-word;
  }

  strong  /*强调*/
  {
    font-weight: bold;
  }
  em /*斜体*/
  {
    font-style:italic;
  }
  del /*删除线*/
  {
    font-style:italic;
  }
  strong em/*强调的斜体*/
  {
    font-weight: bold;
  }

  hr {  /*分隔线*/
    height: 1px;
    margin: 1.5rem 0px;
    border: none;
    border-top: 1px dashed #A5A5A5;
  }

  code /*行内代码*/
  {
    word-wrap: break-word;
    padding: 2px 4px;
    border-radius: 4px;
    margin:0 2px;
    color:#e96900;
    background:#f8f8f8;
  }
  img
  {
    display: block;
    margin:0 auto;  /*图片水平居中*/
    /* margin:0 0;  */ /*图片水平居左，如需要请打开*/
    max-width:100%;
  }
  figcaption/*图片描述文字*/
  {
    margin-top:10px;
    text-align:center;
    /* text-align:left;  */ /*当图片水平居左时，请打开*/
    color:#999;
    font-size: 0.7em;
  }

  /*================表格开始================*/
  table
  {
    display:table;
    width: 100% ;
    text-align: left;
  }
  tbody {
    border: 0;
  }

  table tr {
    border: 0;
    border-top: 1px solid #CCC;
    background-color: white;

  }

  /*隔行改变行的背景色，如需要请打开*/
  /*
  table tr:nth-child(2n) {
    background-color: #F8F8F8;
  }
  */

  table tr th, table tr td {
    font-size: 1em;
    border: 1px solid #CCC;
    padding: 0.5em 1em;
    text-align: left;
  }
  /*表头的属性*/
  table tr th {
    font-weight: bold;
    background-color: #F0F0F0;
  }
  /*================表格结束================*/



  /*================数学公式开始================*/
  .katex-display {/*块公式*/
    font-size:1.22em;
  }
  .katex
  {/*行内公式*/
    padding:8px 3px;
  }
  .katex-display > .katex
  {/*块公式*/
    display:inline-block;
    text-align:center;
    padding:3px;
  }
  .katex img
  {/*行内公式对应的图片*/
    display:inline-block;
    vertical-align:middle;
  }
  /*================数学公式结束================*/

  a[href^="#"] sup
  {/*注脚*/
    vertical-align:super;
    margin:0 2px;
    padding:1px 3px;
    color: #ffffff;
    background:#666666;
    font-size:0.7em;
  }

  /*================任务列表开始================*/
  .task-list-list {
    list-style-type: none;
  }
  .task-list-list.checked {/*已完成*/
    color: #3e3e3e;
  }

  .task-list-list.uncheck {/*未完成*/
    color: #bfc1bf;
  }
  .task-list-list .icon_uncheck, .task-list-list .icon_check {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
  }
  .task-list-list .icon_check:before
  {/*已完成*/
    content: "√";
    border: 2px solid #3e3e3e;
    color:red;
  }
  .task-list-list .icon_uncheck:before
  {/*未完成*/
    content: "x";
    border: 2px solid #bfc1bf;
    color: #bfc1bf;
  }
  .task-list-list .icon_check:before, .task-list-list .icon_uncheck:before
  {/*标志框*/
    padding:2px;
    padding-left: 5px;
    padding-right: 8px;
    border-radius:5px;
  }
  /*================任务列表结束================*/

  .toc
  {/*总目录*/
    margin-left:25px;
  }
  .toc_item
  {/*每条目录*/
    display:block;

  }
  .toc_left
  {/*每级目录的缩进*/
    margin-left:25px;
  }
</style>
